<template>
  <div class="home">
    <!-- 左侧导航栏 -->
    <div class="nav">
      <my-nav-bar :list="user.taocaninfo.pushlimit == 900 ? nonavList : navList" @change="changeActiveBar"></my-nav-bar>
    </div>
    <!-- 右侧 -->
    <div class="main">
      <!-- header -->
      <div class="header">
        <div class="block"></div>
        <div class="welcome">
          <img src="../assets/img/avatar.jpg" alt="" class="avatar" />
          <div class="text">您好！管理员，欢迎来到后台管理系统</div>
        </div>
        <div class="action">
          <!-- 消息 -->
          <div
            class="iconfont icon"
            @click="showMessage"
            :class="{ msg: msg.length }"
          >
            &#xe644;
          </div>
          <!-- 更多操作 -->
          <!-- <el-dropdown @command="changeDropdown">
            <div class="iconfont icon">&#xe68f;</div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in moreAction"
                :key="index"
                :command="item"
                >{{ item.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown> -->
          <!-- 最大化 -->
          <!-- <div class="iconfont icon" @click="fullScreen">&#xe645;</div> -->
          <!-- 退出登录 -->
          <!-- <div class="logout" @click="isShowLogout = true">
            <div class="iconfont icon">&#xe623;</div>
            <div class="text">退出登录</div>
          </div> -->
        </div>
      </div>
      <!-- body -->
      <div class="body">
        <!-- 顶部历史记录栏 -->
        <div class="history">
          <div class="icon-block" @click="clearHistory">
            <div class="iconfont icon-arrow">&#xe69b;</div>
          </div>
          <div v-for="(item, index) in history" :key="index" class="item">
            <div
              class="circle"
              :class="{ active: $route.path == item.path }"
            ></div>
            <div class="text" @click="jumpHistory(item)">
              {{ item.meta.title }}
            </div>
            <div
              class="iconfont icon-close"
              @click="deleteSomeOneHistory(item)"
            >
              &#xe61d;
            </div>
          </div>
        </div>
        <router-view />
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 消息弹窗 -->
    <el-dialog :visible.sync="isShowMsg" width="35%">
      <div class="msg">
        <img src="../assets/img/warning.png" alt="" class="icon" />
        <div class="msg-list">
          <div class="title" v-for="(item, index) in msg" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="btn-block">
        <my-button bgc="#f8b862" @click="isShowMsg = false">确 定</my-button>
      </div>
    </el-dialog>
    <!-- 退出登录弹窗 -->
    <el-dialog :visible.sync="isShowLogout" width="28%">
      <div class="msg">
        <div class="iconfont icon-ask">&#xe627;</div>
        <div class="title">确认要退出登录吗？</div>
      </div>
      <div class="btn-block">
        <my-button bgc="#f8b862" @click="logout">确 定</my-button>
        <my-button bgc="#d4dcd6" @click="isShowLogout = false">取 消</my-button>
      </div>
    </el-dialog>

    <!-- 修改密码弹窗 -->
    <el-dialog
      :visible.sync="revisepopus"
      :show-close="false"
      width="25%"
      class="form-dialog"
    >
      <div class="headers">
        <div class="title">修改密码</div>
        <div class="iconfont icon" @click="revisepopus = false">&#xe608;</div>
      </div>
      <div class="center">
        <div class="item">
          <my-input
            :value.sync="loginValue"
            label="登录账户"
            placeholder="请填写登录账户"
          />
        </div>
        <div class="item">
          <my-input
            :value.sync="passwordValue"
            label="修改密码"
            placeholder="请填写登录密码"
          />
        </div>
        <div class="item">
          <my-input
            :value.sync="passwordValue2"
            label="确认密码"
            placeholder="再次填写登录密码"
          />
        </div>
      </div>
      <div class="floot">
        <my-button bgc="#f8b862" @click="changePassword">确认</my-button>
        <my-button bgc="#d4dcd6" @click="revisepopus = false">取消</my-button>
      </div>
    </el-dialog>

    <!-- 基本资料弹窗 -->
    <el-dialog
      :visible.sync="materialpopus"
      :show-close="false"
      width="30%"
      class="form-dialog"
    >
      <div class="headers">
        <div class="title">基本资料</div>
        <div class="iconfont icon" @click="materialpopus = false">&#xe608;</div>
      </div>
      <div class="center">
        <div class="item">
          <my-input
            :value.sync="accountvalue"
            label="登录账户"
            placeholder="请填写登录账户"
          />
        </div>
        <div class="item">
          <my-input
            :value.sync="namevalue"
            label="企业名称"
            placeholder="请填写登录账户"
          />
        </div>
        <div class="case">
          <div>点击登录商机查看地址</div>
          <p>通过填写下方信息即可登录商机后台，方便查看最新商机</p>
        </div>
        <div class="item">
          <my-input
            :value.sync="cluevalue"
            label="线索查看密码"
            placeholder="请填写登录账户"
          />
        </div>
      </div>
      <div class="floot">
        <my-button bgc="#f8b862" @click="information">确认</my-button>
        <my-button bgc="#d4dcd6" @click="materialpopus = false">取消</my-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { navList } from "@/data/nav.js";
import { nonavList } from "@/data/novip.js";
import myNavBar from "@/components/myNavBar.vue";
import myInput from "@/components/myInput.vue";
import myButton from "@/components/myButton.vue";
export default {
  components: { myNavBar, myInput, myButton },
  data() {
    return {
      administrator: "",
      loginValue: "",
      passwordValue: "",
      passwordValue2: "",
      accountvalue: "",
      namevalue: "",
      cluevalue: "",
      revisepopus: false,
      materialpopus: false,
      navList,
      nonavList,
      moreAction: [
        { label: "修改密码", routeName: "" },
        {
          label: "基本资料",
          routeName: "",
        },
      ],
      isShowMsg: false,
      isShowLogout: false,
      msg: [],
      user: JSON.parse(localStorage.getItem("person")),
    };
  },
  computed: {
    history() {
      return this.$store.state.history;
    },
  },
  mounted() {
    this.getMsg();
    this.changeLinkIcon();
    this.administrator = this.user.oemico;
  },
  methods: {
    changeLinkIcon() {
      let link =
        document.querySelector("link[rel*='icon']") ||
        document.createElement("link");
      link.type = "image/x-icon";
      link.rel = "shortcut icon";
      link.href = this.user.oemico;
      document.getElementsByTagName("head")[0].appendChild(link);
    },
    // 铃铛接口
    async getMsg() {
      let res = await this.$api.htsy_getMessage({
        type: "client",
      });
      this.msg = res.data;
    },

    //退出接口
    async logout() {
      let res = await this.$api.logout({});
      window.localStorage.removeItem("person");
      this.isShowLogout = false;
      if (res.msg == "退出登录成功") {
        this.$router.push({ name: "login" });
      }
    },
    // 点击左侧导航栏
    changeActiveBar(item) {
      if (this.$route.name == item.routeName) {
        return;
      }
      this.$router.push({ name: item.routeName });
    },
    // 查看消息
    showMessage() {
      if (this.msg.length) {
        this.isShowMsg = true;
      }
    },
    // onMouseenter(index) {
    //   this.navList[index].show = true;
    //   let nav = this.navList.find((v, i) => i == index);
    //   this.$set(this.navList, index, nav);
    // },
    // onMouseleave(index) {
    //   this.navList[index].show = false;
    //   let nav = this.navList.find((v, i) => i == index);
    //   this.$set(this.navList, index, nav);
    // },
    // 修改密码 基本资料
    changeDropdown(val) {
      if (val.label == "修改密码") {
        this.revisepopus = true;
      }
      if (val.label == "基本资料") {
        this.materialpopus = true;
      }
    },
    //修改密码接口
    async changePassword() {
      if (this.loginValue == "") {
        return this.$message({ message: "请输入登录账户", type: "warning" });
      }
      if (this.passwordValue == "") {
        return this.$message({ message: "请输入密码", type: "warning" });
      }
      if (this.passwordValue2 == "") {
        return this.$message({ message: "请输入确认密码", type: "warning" });
      }
      if (this.passwordValue !== this.passwordValue2) {
        return this.$message({
          message: "两次密码输入不一致",
          type: "warning",
        });
      }
      let res = await this.$api.home_changePassword({
        password: this.passwordValue,
        password_again: this.passwordValue2,
      });
      this.passwordValue = "";
      this.passwordValue2 = "";
      this.revisepopus = false;
      res.msg == "保存成功"
        ? this.$message({
            message: "修改成功",
            type: "success",
          })
        : this.$message({
            message: "修改失败",
            type: "warning",
          });
    },
    //基本资料接口
    async information() {
      if (this.accountvalue == "") {
        return this.$message({ message: "请输入账户", type: "warning" });
      }
      if (this.namevalue == "") {
        return this.$message({ message: "请输入企业名称", type: "warning" });
      }
      if (this.cluevalue == "") {
        return this.$message({ message: "请输入账户", type: "warning" });
      }
      let res = await this.$api.home_information({
        smsauth: this.cluevalue,
      });
      this.materialpopus = false;
      res.msg == "保存成功"
        ? this.$message({
            message: "保存成功",
            type: "success",
          })
        : this.$message({
            message: "保存失败",
            type: "warning",
          });
    },
    // 全屏
    fullScreen() {},
    jumpHistory(item) {
      this.$router.push(item);
    },
    // 清空除首页外的历史记录
    clearHistory() {
      let history = this.history.filter((v) => v.name == "htsyIndex");
      this.$store.commit("updateHistory", history);
      // 跳到最后一条历史记录
      let lastRouteName = this.history[this.history.length - 1].name;
      this.$router.push({ name: lastRouteName });
    },
    // 删除某一条历史记录
    deleteSomeOneHistory(item) {
      if (item.name == "htsyIndex") {
        return;
      }
      let history = this.history.filter((v) => v.name != item.name);
      this.$store.commit("updateHistory", history);
      // 跳到最后一条历史记录
      let lastRouteName = this.history[this.history.length - 1];
      this.$router.push(lastRouteName);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  padding-left: 92px;
  box-sizing: border-box;
}
.nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 92px;
  height: 100%;
}
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .header {
    position: absolute;
    z-index: 5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 85px;
    padding: 0 56px 0 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(237, 237, 237);
    background-color: #fff;
    .block {
      position: absolute;
      left: -50px;
      top: 0;
      width: 50px;
      height: 100%;
      background-color: #fff;
    }
    .welcome {
      position: absolute;
      left: 54px;
      display: flex;
      align-items: center;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: contain;
      }
      .text {
        font-size: 18px;
        margin-left: 25px;
      }
    }
    .action {
      display: flex;
      align-items: center;
      .icon {
        font-size: 20px;
        margin: 0 20px;
        cursor: pointer;
      }
      .msg {
        color: #ee1e4f;
      }
      .el-dropdown {
        display: flex;
        align-items: center;
      }
      .logout {
        display: flex;
        cursor: pointer;
      }
    }
  }
  .body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 85px 30px 30px 30px;
    box-sizing: border-box;
    .history {
      position: absolute;
      z-index: 6;
      display: flex;
      align-items: center;
      width: 98%;
      height: 52px;
      background-color: #f4f7fc;
      overflow: auto;
      .icon-block {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33px;
        height: 33px;
        margin-right: 10px;
        background-color: #fff;
        cursor: pointer;
        .icon-arrow {
          font-size: 15px;
          color: #dbdbdb;
        }
      }
      .item {
        display: flex;
        align-items: center;
        color: #88898e;
        margin-right: 12px;
        padding: 6px 12px;
        background-color: #fff;
        cursor: pointer;
        .circle {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #e4ecff;
        }
        .icon-close {
          font-size: 8px;
          color: #dbdbdb;
        }
        .text {
          font-size: 16px;
          margin: 0 10px;
          white-space: nowrap;
        }
        .active {
          .circle {
            background-color: #4282f9;
          }
        }
      }
    }
  }
}

// 弹窗样式
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 35px 25px 35px;
    .msg {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-bottom: 18px;
      background-color: rgba(245, 245, 245);
      height: 240px;
      overflow: auto;
      .msg-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 80px 20px 20px 20px;
        box-sizing: border-box;
      }
      .icon {
        position: absolute;
        left: 50%;
        top: 20px;
        transform: translate(-50%, 0);
        width: 45px;
        height: 45px;
      }
      .title {
        font-size: 18px;
        margin-bottom: 30px;
      }
      // .text {
      //   font-size: 16px;
      //   margin-bottom: 32px;
      // }
      .icon-ask {
        font-size: 42px;
        margin: 25px 0;
        color: #f79844;
      }
    }
    .btn-block {
      display: flex;
      align-items: center;
      justify-content: center;
      .button {
        width: 114px;
        height: 36px;
        margin: 0 10px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}

// 修改密码 基本资料
.form-dialog {
  /deep/ .el-dialog__body {
    padding: 0px 0px;
    .headers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 15px;
      font-weight: bold;
      padding: 18px 28px;
      box-sizing: border-box;
      border-bottom: 1px #e7e7e7 solid;
    }
    .icon {
      color: #b2b2b2;
      cursor: pointer;
    }
    .center {
      box-sizing: border-box;
      width: 100%;
      padding: 40px 30px 0px 10%;
      background-color: #fff;
      .item {
        padding-bottom: 20px;
        .label {
          flex-shrink: 0;
          width: 120px;
          text-align: right;
        }
      }
      .case {
        margin: 20px 0px 0px 130px;
        p {
          font-size: 12px;
        }
        div {
          font-size: 12px;
          color: #ee1e4f;
          cursor: pointer;
        }
      }
    }
    .floot {
      height: 65px;
      width: 50%;
      display: flex;
      margin: 20px;
      .button {
        width: 98px;
        height: 30px;
        margin: 10px;
      }
    }
  }
}
</style>
